<template>
	<navbar titleText="收藏"/>
	<view class="top">
	</view>
	<view class="content">
		<view v-for="(item,index) in collect_id" :key="index" :data-hid="item.collect_id"  class="content-card" @click="toDatail">
			<image :src="all_products[item.collect_id].img ? all_products[item.collect_id].img : '../../static/img_default.png'" class="content-photo"></image>
			<view class="content-text">{{all_products[item.collect_id].name}}</view>
			<view class="content-text2">{{all_products[item.collect_id].author}}</view>
		</view>
		
		<view class="content-card">
			<image class="content-photo" src="../../static/collect/add.png" @click="toIndex"></image>
			<!-- <view class="content-text">123</view>
			<view class="content-text2">456</view> -->
		</view>
	</view>
</template>

<script setup>
	import {onLoad ,onShow} from '@dcloudio/uni-app'
	import { ref} from 'vue';
	import { useUserStore } from '../../stores/counter';
	const app = getApp()
	const userStore =useUserStore()
	const all_products =ref([])
	const collect_id = ref([])
	onLoad(()=>{
		init()
	})
	
	onShow(()=>{
		app.globalData.utils.isLogin()			//判断是否登录
		app.globalData.utils.request({			//请求收藏id
			url:"/collect_id",
			data:{
				user_id:uni.getStorageSync('user_info').userid
			},
			success:res =>{
				collect_id.value = res
				userStore.fillCollectId(res)	
			},
			fail:err =>{
				console.log(err)
			}
			
		})
	})
	const init = ()=>{
		app.globalData.utils.request({   //获取主数据包
			url:"/all_products",
			success:res =>{
				all_products.value=res
			},
			fail:err =>{
				console.log(err)
			}
		})
	}
	const toDatail =(e)=>{           //跳转详情
		app.globalData.utils.toDetails(e.currentTarget.dataset.hid)
	}
	const toIndex =()=>{           //跳转首页
		uni.switchTab({
			url: '/pages/index/index'
		});
	}
</script>

<style scoped>
	.top{
		width: 750rpx;
		height: 120rpx;
		background-color: #f5f5f5;
	}
	.content{
		padding: 40rpx 40rpx;
		display: grid;
		grid-template-columns:33% 33% 33%;
	}
	.content-card{
		width: 180rpx;
		height: 320rpx;
		margin: 24rpx;
	}
	.content-photo{
		width: 180rpx;
		height: 252rpx;
	}
	.content-text{
		font-size: 27rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.content-text2{
		font-size: 22rpx;
	}
</style>
